<template>
	<view class="popup-box">
		<view class="pb-body">
			<!-- 头部标题区 -->
			<view class="title-box flex-row-between-center">
				<view class="">{{ title }}</view>
				<view class="cancel" @click="close">{{ subTitle }}</view>
			</view>
			<slot name="segment"></slot>

			<!-- 滚动区域 -->
			<scroll-view scroll-y>
				<slot name="scrView"></slot>
			</scroll-view>

			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	title: {
		type: String,
		default: '选择服务时间'
	},
	subTitle: {
		type: String,
		default: '取消'
	},
	popup: {
		type: Object,
		reuired: true
	}
});
// 点击关闭底部弹出层
function close() {
	props.popup.close();
	uni.showTabBar();
}
</script>

<style scoped lang="scss">
// 底部弹出层
.popup-box {
	.pb-body {
		background: $uni-bg-color;
		padding: 36rpx 30rpx;
		border-radius: 10px 10px 0 0;
		.title-box {
			margin-bottom: 34rpx;
			.cancel {
				color: $uni-text-color-grey;
			}
		}
	}
}
</style>
